<script setup lang="ts">
  import { computed } from 'vue'

  defineOptions({
    name: 'ExButton'
  })

  interface Props {
    type?: 'default' | 'primary' | 'success' | 'warning' | 'danger'
    plain?: boolean
    value?: string
    width?: string
    height?: string
    borderRadius?: string
  }
  const props = withDefaults(defineProps<Props>(), {
    type: 'default',
    plain: false,
    value: '',
    width: '',
    height: '',
    borderRadius: ''
  })

  const styles = computed(() => {
    const style: { [key: string]: string } = {}
    if (props.width) {
      style.width = props.width
      style.padding = '0'
    }
    if (props.height) {
      style.height = props.height
    }
    if (props.borderRadius) {
      style.borderRadius = props.borderRadius
    }
    return style
  })
</script>

<template>
  <el-button v-if="plain" plain :class="type" v-bind="$attrs" :style="styles">
    <template v-if="value">{{ value }}</template>
    <slot v-else></slot>
  </el-button>
  <el-button v-else :class="type" v-bind="$attrs" :style="styles">
    <template v-if="value">{{ value }}</template>
    <slot v-else></slot>
  </el-button>
</template>

<style lang="scss" scoped>
  .el-button.default {
    background: linear-gradient(92deg, #108aff 0%, #50adff 100%);
    color: #fff;

    &:hover {
      opacity: 0.9;
    }

    &.is-disabled {
      opacity: 0.6;
    }
  }

  .el-button.is-plain {
    &.default {
      background: linear-gradient(92deg, #f0f8ff 0%, #f2f9ff 100%);
      color: #4f5c7d;
      border-color: #cfdfe7;

      &:hover {
        color: #108aff;
        border-color: #108aff;
      }

      &.is-disabled {
        color: #4f5c7d;
        border-color: #cfdfe7;
        opacity: 0.6;
      }
    }

    &.primary {
      background: linear-gradient(
        90deg,
        rgba(12, 136, 255, 0.02) 0%,
        rgba(83, 174, 255, 0.02) 100%
      );
      color: #108aff;
      border-color: rgba(14, 137, 255, 0.2);

      &:hover {
        background: linear-gradient(90deg, #0c88ff 0%, #53aeff 100%);
        color: #fff;
      }

      &.is-disabled {
        background: linear-gradient(
          90deg,
          rgba(12, 136, 255, 0.02) 0%,
          rgba(83, 174, 255, 0.02) 100%
        );
        color: #108aff;
        opacity: 0.6;
      }
    }

    &.warning {
      background: linear-gradient(
        90deg,
        rgba(254, 175, 32, 0.02) 0%,
        rgba(255, 215, 128, 0.02) 100%
      );
      color: #d2a045;
      border-color: rgba(210, 160, 69, 0.2);

      &:hover {
        background: linear-gradient(271deg, #e09c44 0%, #e98e49 100%);
        color: #fff;
      }

      &.is-disabled {
        opacity: 0.6;
      }
    }

    &.success {
      background: linear-gradient(
        90deg,
        rgba(0, 209, 255, 0.02) 0%,
        rgba(141, 234, 255, 0.02) 100%
      );
      color: #3b918e;
      border-color: rgba(59, 145, 142, 0.2);

      &:hover {
        background: linear-gradient(94deg, #42a68c 0%, #44b8be 100%);
        color: #fff;
      }

      &.is-disabled {
        opacity: 0.6;
      }
    }

    &.danger {
      background: linear-gradient(
        90deg,
        rgba(254, 175, 32, 0.02) 0%,
        rgba(255, 215, 128, 0.02) 100%
      );
      color: #d25b45;
      border-color: rgba(210, 91, 69, 0.2);

      &:hover {
        background: linear-gradient(271deg, #e07a44 0%, #e96949 100%);
        color: #fff;
      }

      &.is-disabled {
        opacity: 0.6;
      }
    }
  }
</style>
